<template>
  <div class="tabs-box">
    <div id="col_resize" class="col_resize" :class="{ mousedown: mouseDownScreenY }"
        :style="{ top: mouseDownScreenY + 'px' }" @mousedown="mouseDown"></div>
    <div class="tabs">
      <div class="tab" :class="{ active: tabActive == 'times' }" @click="switchTab('times')">
        <div class="font">
          实时数据
        </div>
      </div>
      <!-- <div class="tab" :class="{active:tabActive == 'times'}">
        <div class="font">北斗报警</div>
      </div>
      <div class="tab" :class="{active:tabActive == 'times'}">
        <div class="font">主动安全报警</div>
      </div>
      <div class="tab" :class="{active:tabActive == 'times'}">
        <div class="font">硬件报警</div>
      </div> -->
      <div class="tab" :class="{ active: tabActive == 'offline' }" @click="switchTab('offline')">
        <div class="font">离线车辆</div>
      </div>
      <div class="tab" :class="{ active: tabActive == 'outage' }" @click="switchTab('outage')">
        <div class="font">停运车辆</div>
      </div>
      <!-- <div class="tab" :class="{active:tabActive == 'times'}">
        <div class="font">运营查岗</div>
      </div> -->
      <div class="tab" v-if="poiShow" :class="{ active: tabActive == 'poi' }" @click="switchTab('poi')">
        <div class="font">POI管理</div>
      </div>
      <img class="collapse" :src="op == 'down' ? topImg : downImg" @click="toogle" />
    </div>
    <div class="tabs-content" :style="{ height: contentHeight + 'px' }">
      <keep-alive>
        <component :is="currentTab"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script setup>
import topImg from '@/assets/images/safe/top.png'
import downImg from '@/assets/images/safe/down.png'
import Position from './tables/position.vue';
import OfflineList from './tables/offlineList.vue';
import OutageRecord from './tables/outageList.vue';
import Labels from './tables/labels.vue';
import { throttle } from 'lodash'
import useSatetyMapStore from '@/store/modules/safetyMap'
const safeMapStore = useSatetyMapStore();
const props = defineProps({
  model: Object
})
const currentTab = shallowRef(Position)
const tabs = reactive({
  times:shallowRef(Position),
  offline:shallowRef(OfflineList),
  outage:shallowRef(OutageRecord),
  poi:shallowRef(Labels),
})
//tab 操作
const tabActive = ref('');

function switchTab(type) {
  tabActive.value = type
  currentTab.value = tabs[type]
  contentHeight.value<= 0 ?toogle():'';
}
//内容操作
const op = ref('down');
const contentHeight = ref(0);
const mouseDownScreenY = ref(0)
function toogle() {
  op.value = op.value == 'top' ? 'down' : 'top';
  if (op.value == 'down') {
    contentHeight.value = 0
  } else {
    contentHeight.value = 300
  }
}
// 鼠标按下事件
var scollY = 0;
var endY = 0;

const mouseDown = (event) => {
  document.addEventListener('mousemove', mouseMove)
  scollY = event.clientY
  // console.log('mousemove', event)
  mouseDownScreenY.value = event.clientY
}
const mouseMove = (event) => {
  // console.log('mouseMove', event)
  endY = event.clientY
  mouseDownScreenY.value = event.clientY
  // contentHeight.value = event.offsetY
}
// 鼠标释放事件
const mouseUp = () => {
  // 指定元素可改变的最大以及最小宽度
  // const moveX = contentHeight.value > 800 ? 800 : contentHeight.value < 200 ? 200 : contentHeight.value
  // console.log('aaaaa')
  if (scollY && endY) {
    contentHeight.value = contentHeight.value + (scollY - endY)
  }
  document.removeEventListener('mousemove', mouseMove)
  scollY = endY = 0;
  mouseDownScreenY.value = 0
}
// 鼠标释放节流事件
const handleMoveThrottled = throttle(mouseUp, 300)
// onMounted时添加鼠标移动事件监听器
onMounted(() => {
  document.addEventListener('mouseup', handleMoveThrottled)
})
// 组件卸载时移除监听
onUnmounted(() => {
  document.removeEventListener('mouseup', handleMoveThrottled)
})
watch(contentHeight, (newValue) => {
  console.log('高度', newValue)
  safeMapStore.setTabTableHeight(newValue)
})
const poiShow = computed(() => {
  return safeMapStore.poiTabShow
})
watch(poiShow, (newValue) => {
  if(newValue){
    switchTab('poi')
    contentHeight.value<= 0 ?toogle():'';
  }else{
    switchTab('times')
    contentHeight.value = 0;
    toogle()
    tabActive.value = ''
  }
})
</script>

<style lang="scss" scoped>
.tabs-content .app-container{
  padding-top: 10px;
}
:deep(.tabs-content .el-table .el-table__cell){
  padding: 2px 0;
  height: inherit !important;
}
// :deep(.tabs-content .el-table th.el-table__cell){
//   height: inherit;
// }
.tabs-box {
  position: absolute;
  bottom: 40px;
  width: 100%;
  z-index: 100;


  .tabs {
    border-top: 1px solid #C3C3C3;
    border-bottom: 1px solid #C3C3C3;
    background: #FFFFFF;
    display: flex;
    width: 100%;
    padding-left: 10px;
    margin-top: 10px;
    .tab {
      padding: 6px 15px;
      background: #FFF;
      position: relative;
      text-align: center;
      font-size: 14px;
      color: #434343;
      margin-right: 10px;
      border-left: 1px solid #C3C3C3;
      border-right: 1px solid #C3C3C3;
      transform: skewX(30deg);
      cursor: pointer;

      .font {
        color: #434343;
        transform: skewX(-30deg);
      }

      &.active {

        background: #668FF5;

        .font {
          color: #FFF;
        }
      }
    }

    .collapse {
      position: absolute;
      width: 18px;
      height: 10px;
      right: 30px;
      top: 19px;
      cursor: pointer;
    }
  }

  .tabs-content {
    position: relative;
    height: 200px;
    background: #fff;
    transition: height 1s ease;
  }
}

.col_resize {
  position: absolute;
  width: 100%;
  height: 10px;
  cursor: row-resize;
  z-index: 5;

  &:hover {
    background-color: #efefef;
  }

  &.mousedown {
    position: fixed;
    background-color: red;
  }
}</style>